/**
 * 员工绩效管理页面 - 导出功能详细注释版本
 * 
 * 导出功能说明：
 * 1. 支持多种格式：Excel、Word、PDF、PPT、CSV、TXT、JSON
 * 2. 每种格式都有专门的处理逻辑和错误处理
 * 3. 自动生成带时间戳的文件名
 * 4. 使用file-saver库处理文件下载
 */

// 导出功能 - 支持多种格式的数据导出
// 参数: format - 导出格式类型 ('excel', 'word', 'pdf', 'ppt', 'csv', 'txt', 'json')
// 功能: 将当前表格数据导出为指定格式的文件并自动下载
const handleExport = async (format) => {
  try {
    // 1. 数据预处理：将表格数据转换为标准导出格式
    // 只保留需要的字段，确保数据的一致性和完整性
    const exportData = dataSource.map(item => ({
      '姓名': item.name,
      '部门': item.department,
      '职位': item.position,
      '角色': item.role,
      '手机号': item.phone,
      '工时成本': item.workcost
    }))
    let fileName = '' // 导出文件名
    let data = null   // 导出数据（Blob对象）

    // 2. 根据格式类型执行对应的导出逻辑
    switch (format) {
      case 'excel':
        // Excel格式导出 (.xlsx)
        // 使用 xlsx 库生成标准的Excel文件，支持表格格式和样式
        try {
          // 2.1 将JSON数据转换为工作表
          const ws = XLSX.utils.json_to_sheet(exportData) 
          // 2.2 创建新的工作簿
          const wb = XLSX.utils.book_new()
          // 2.3 将工作表添加到工作簿中，设置工作表名称为"员工绩效数据"
          XLSX.utils.book_append_sheet(wb, ws, '员工绩效数据')
          // 2.4 将工作簿转换为二进制数组格式
          const excelBuffer = XLSX.write(wb, { 
            bookType: 'xlsx',  // 文件类型为xlsx
            type: 'array'      // 输出格式为数组
          })
          
          // 2.5 创建Blob对象，设置正确的MIME类型
          data = new Blob([excelBuffer], { 
            type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' 
          })
          // 2.6 生成带时间戳的文件名
          fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.xlsx`
        } catch (error) {
          console.error('Excel导出失败:', error)
          message.error('Excel格式导出失败')
          return
        }
        break

      case 'word':
        // Word格式导出 (.docx)
        // 使用 docx 库生成包含表格的Word文档，支持标题、时间戳等
        try {
          // 2.1 创建表格行数据
          const tableRows = [
            // 表头行：使用Object.keys获取所有字段名作为表头
            new TableRow({
              children: Object.keys(exportData[0]).map(header => 
                new TableCell({
                  children: [new Paragraph({ 
                    text: header, 
                    alignment: AlignmentType.CENTER  // 居中对齐
                  })],
                  width: { size: 2000, type: WidthType.DXA }  // 设置单元格宽度
                })
              )
            }),
            // 数据行：遍历所有数据记录
            ...exportData.map(row => 
              new TableRow({
                children: Object.values(row).map(value => 
                  new TableCell({
                    children: [new Paragraph({ 
                      text: value?.toString() || '',  // 确保值为字符串，空值处理
                      alignment: AlignmentType.CENTER 
                    })],
                    width: { size: 2000, type: WidthType.DXA }
                  })
                )
              })
            )
          ]

          // 2.2 创建Word文档结构
          const doc = new Document({
            sections: [{
              properties: {},  // 文档属性
              children: [
                // 文档标题
                new Paragraph({
                  text: '员工绩效数据报表',
                  heading: 'Heading1',  // 一级标题
                  alignment: AlignmentType.CENTER
                }),
                // 导出时间
                new Paragraph({
                  text: `导出时间：${new Date().toLocaleString()}`,
                  alignment: AlignmentType.CENTER
                }),
                // 空行分隔
                new Paragraph({ text: '' }),
                // 数据表格
                new DocxTable({
                  width: { size: 100, type: WidthType.PERCENTAGE },  // 表格宽度100%
                  rows: tableRows
                })
              ]
            }]
          })

          // 2.3 生成Word文档Blob对象
          // 注意：浏览器环境使用toBlob，Node环境使用toBuffer
          const blob = await Packer.toBlob(doc)
          data = blob
          
          // 2.4 生成文件名
          fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.docx`
        } catch (error) {
          console.error('Word导出失败:', error)
          message.error('Word格式导出失败')
          return
        }
        break

      case 'pdf':
        // PDF格式导出 (.pdf)
        // 使用 jsPDF + html2canvas 将HTML内容转换为PDF文档
        try {
          // 2.1 创建临时HTML元素用于生成PDF
          // 将元素定位到屏幕外，避免影响页面布局
          const tempDiv = document.createElement('div')
          tempDiv.style.position = 'absolute'
          tempDiv.style.left = '-9999px'
          tempDiv.style.top = '-9999px'
          tempDiv.style.width = '800px'  // 设置固定宽度确保布局一致
          tempDiv.style.padding = '20px'
          tempDiv.style.fontFamily = 'Arial, sans-serif'
          tempDiv.style.backgroundColor = 'white'
          
          // 2.2 构建HTML内容，包含标题、统计信息和数据表格
          tempDiv.innerHTML = `
            <!-- 文档标题区域 -->
            <div style="text-align: center; margin-bottom: 30px;">
              <h1 style="color: #333; margin-bottom: 10px;">员工绩效数据报表</h1>
              <p style="color: #666; font-size: 14px;">导出时间：${new Date().toLocaleString()}</p>
            </div>
            
            <!-- 统计信息区域 -->
            <div style="margin-bottom: 30px; display: flex; justify-content: space-around; text-align: center;">
              <div>
                <div style="font-size: 24px; font-weight: bold; color: #1890ff;">${exportData.length}</div>
                <div style="color: #666; font-size: 12px;">总员工数</div>
              </div>
              <div>
                <div style="font-size: 24px; font-weight: bold; color: #1890ff;">${[...new Set(exportData.map(item => item['部门']))].length}</div>
                <div style="color: #666; font-size: 12px;">部门数量</div>
              </div>
              <div>
                <div style="font-size: 24px; font-weight: bold; color: #1890ff;">${[...new Set(exportData.map(item => item['角色']))].length}</div>
                <div style="color: #666; font-size: 12px;">角色类型</div>
              </div>
            </div>
            
            <!-- 数据表格区域 -->
            <table style="width: 100%; border-collapse: collapse; font-size: 12px;">
              <thead>
                <tr style="background-color: #f8f9fa;">
                  ${Object.keys(exportData[0]).map(header => 
                    `<th style="border: 1px solid #ddd; padding: 8px; text-align: center; font-weight: bold;">${header}</th>`
                  ).join('')}
                </tr>
              </thead>
              <tbody>
                ${exportData.map(row => `
                  <tr>
                    ${Object.values(row).map(value => 
                      `<td style="border: 1px solid #ddd; padding: 6px; text-align: center;">${value || ''}</td>`
                    ).join('')}
                  </tr>
                `).join('')}
              </tbody>
            </table>
          `
          
          // 2.3 将临时元素添加到DOM中
          document.body.appendChild(tempDiv)
          
          // 2.4 使用html2canvas将HTML转换为canvas
          const canvas = await html2canvas(tempDiv, {
            scale: 2,                    // 缩放比例，提高清晰度
            useCORS: true,               // 允许跨域图片
            allowTaint: true,            // 允许污染canvas
            backgroundColor: '#ffffff'   // 设置背景色
          })
          
          // 2.5 清理临时元素
          document.body.removeChild(tempDiv)
          
          // 2.6 创建PDF文档
          const imgData = canvas.toDataURL('image/png')  // 将canvas转换为图片数据
          const pdf = new jsPDF('p', 'mm', 'a4')        // 创建A4纵向PDF
          
          // 2.7 设置PDF参数
          const imgWidth = 210    // A4纸宽度(mm)
          const pageHeight = 295  // A4纸高度(mm)
          const imgHeight = (canvas.height * imgWidth) / canvas.width  // 按比例计算图片高度
          let heightLeft = imgHeight
          let position = 0
          
          // 2.8 添加第一页图片
          pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
          heightLeft -= pageHeight
          
          // 2.9 如果内容超过一页，自动分页
          while (heightLeft >= 0) {
            position = heightLeft - imgHeight
            pdf.addPage()  // 添加新页面
            pdf.addImage(imgData, 'PNG', 0, position, imgWidth, imgHeight)
            heightLeft -= pageHeight
          }
          
          // 2.10 生成PDF Blob对象
          const pdfBlob = pdf.output('blob')
          data = new Blob([pdfBlob], { type: 'application/pdf' })
          fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.pdf`
        } catch (error) {
          console.error('PDF导出失败:', error)
          message.error('PDF格式导出失败')
          return
        }
        break

      case 'ppt':
        // 演示文稿格式导出 (.html)
        // 生成美观的HTML演示文稿，包含统计概览和详细数据
        const pptContent = `
          <!DOCTYPE html>
          <html>
          <head>
            <meta charset="utf-8">
            <title>员工绩效数据演示文稿</title>
            <style>
              /* 基础样式设置 */
              body { 
                font-family: Arial, sans-serif; 
                margin: 0; 
                padding: 20px; 
                background: #f0f0f0; 
              }
              /* 幻灯片容器样式 */
              .slide { 
                background: white; 
                margin: 20px auto; 
                padding: 40px; 
                border-radius: 10px; 
                box-shadow: 0 4px 8px rgba(0,0,0,0.1); 
                max-width: 800px; 
              }
              /* 标题样式 */
              .title { 
                text-align: center; 
                color: #333; 
                font-size: 28px; 
                margin-bottom: 30px; 
              }
              /* 副标题样式 */
              .subtitle { 
                text-align: center; 
                color: #666; 
                font-size: 16px; 
                margin-bottom: 40px; 
              }
              /* 表格样式 */
              table { 
                width: 100%; 
                border-collapse: collapse; 
                margin-top: 20px; 
              }
              th, td { 
                border: 1px solid #ddd; 
                padding: 12px; 
                text-align: center; 
              }
              th { 
                background-color: #f8f9fa; 
                font-weight: bold; 
              }
              /* 统计信息样式 */
              .stats { 
                display: flex; 
                justify-content: space-around; 
                margin: 30px 0; 
              }
              .stat-item { 
                text-align: center; 
              }
              .stat-number { 
                font-size: 24px; 
                font-weight: bold; 
                color: #1890ff; 
              }
              .stat-label { 
                color: #666; 
                margin-top: 5px; 
              }
            </style>
          </head>
          <body>
            <!-- 第一页：统计概览 -->
            <div class="slide">
              <div class="title">员工绩效数据报表</div>
              <div class="subtitle">${new Date().toLocaleString()}</div>
              <div class="stats">
                <div class="stat-item">
                  <div class="stat-number">${exportData.length}</div>
                  <div class="stat-label">总员工数</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">${[...new Set(exportData.map(item => item['部门']))].length}</div>
                  <div class="stat-label">部门数量</div>
                </div>
                <div class="stat-item">
                  <div class="stat-number">${[...new Set(exportData.map(item => item['角色']))].length}</div>
                  <div class="stat-label">角色类型</div>
                </div>
              </div>
            </div>
            
            <!-- 第二页：详细数据 -->
            <div class="slide">
              <div class="title">员工绩效详细数据</div>
              <table>
                <thead>
                  <tr>
                    ${Object.keys(exportData[0]).map(header => `<th>${header}</th>`).join('')}
                  </tr>
                </thead>
                <tbody>
                  ${exportData.map(row => `
                    <tr>
                      ${Object.values(row).map(value => `<td>${value || ''}</td>`).join('')}
                    </tr>
                  `).join('')}
                </tbody>
              </table>
            </div>
          </body>
          </html>
        `
        data = new Blob([pptContent], { type: 'text/html' })
        fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.html`
        break

      case 'csv':
        // CSV格式导出 (.csv)
        // 生成标准的逗号分隔值文件，便于数据交换和导入其他系统
        const csvContent = [
          // 第一行：字段名（表头）
          Object.keys(exportData[0]).join(','),
          // 后续行：数据内容
          ...exportData.map(row => Object.values(row).join(','))
        ].join('\n')  // 使用换行符分隔各行
        
        data = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' })
        fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.csv`
        break

      case 'txt':
        // 文本格式导出 (.txt)
        // 生成易读的纯文本文件，每行一条记录，字段间用分隔符连接
        const txtContent = exportData.map(row => 
          Object.entries(row).map(([key, value]) => `${key}: ${value}`).join(' | ')
        ).join('\n')  // 每条记录占一行
        
        data = new Blob([txtContent], { type: 'text/plain;charset=utf-8' })
        fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.txt`
        break

      case 'json':
        // JSON格式导出 (.json)
        // 生成结构化数据文件，便于程序处理和API调用
        const jsonContent = JSON.stringify(exportData, null, 2)  // 美化输出，缩进2个空格
        data = new Blob([jsonContent], { type: 'application/json' })
        fileName = `员工绩效数据_${new Date().toISOString().split('T')[0]}.json`
        break

      default:
        // 不支持的格式类型
        message.error('不支持的导出格式')
        return
    }

    // 3. 执行文件下载
    // 使用 file-saver 库处理文件下载，兼容各种浏览器
    saveAs(data, fileName)
    
    // 4. 显示成功提示
    message.success(`${format.toUpperCase()}格式导出成功`)
  } catch (error) {
    // 5. 错误处理
    console.error('导出失败:', error)
    message.error('导出失败')
  }
}

// 导出格式选项配置
// 定义所有支持的导出格式及其显示信息
const exportOptions = [
  {
    key: 'excel',
    label: 'Excel格式 (.xlsx)',
    icon: '📊'  // 使用emoji图标增强视觉效果
  },
  {
    key: 'word',
    label: 'Word格式 (.docx)',
    icon: '📝'
  },
  {
    key: 'pdf',
    label: 'PDF格式 (.pdf)',
    icon: '📄'
  },
  {
    key: 'ppt',
    label: '演示文稿 (.html)',
    icon: '📽️'
  },
  {
    key: 'csv',
    label: 'CSV格式 (.csv)',
    icon: '📋'
  },
  {
    key: 'txt',
    label: '文本格式 (.txt)',
    icon: '📄'
  },
  {
    key: 'json',
    label: 'JSON格式 (.json)',
    icon: '🔧'
  }
]

// 导出下拉菜单项配置
// 将格式选项转换为Ant Design Dropdown组件需要的格式
const exportMenuItems = exportOptions.map(option => ({
  key: option.key,  // 菜单项的唯一标识
  label: (
    // 自定义菜单项内容，包含图标和文字
    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
      <span>{option.icon}</span>
      <span>{option.label}</span>
    </div>
  ),
  onClick: () => handleExport(option.key)  // 点击时调用对应的导出函数
})) 